<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
	#follow-elem {
		width: 120px;
		height: 120px;
		position: absolute;
		left: 50%;
		margin-left: -60px;
		top: 38%;
		margin-top: -40px;
		background: #e3f5ff;
		border:1px solid #abd3ea;
		border-radius: 6px;
	}
	#follow-elem input {
		width: 14px;
		height: 14px;
		position: absolute;
		cursor: pointer;
	}
	#follow-elem .nw {
		left: 14px;
		top: 0;
	}
	#follow-elem .n {
		left: 50%;
		margin-left: -7px;
		top: 0;
	}
	#follow-elem .ne {
		right: 14px;
		top: 0;
	}
	#follow-elem .en {
		right: 0;
		top: 14px;
	}
	#follow-elem .e {
		right: 0;
		top: 50%;
		margin-top: -7px;
	}
	#follow-elem .es {
		right: 0;
		bottom: 14px;
	}
	#follow-elem .se {
		right: 14px;
		bottom: 0;
	}
	#follow-elem .s {
		left: 50%;
		margin-left: -7px;
		bottom: 0;
	}
	#follow-elem .sw {
		left: 14px;
		bottom: 0;
	}
	#follow-elem .ws {
		left: 0;
		bottom: 14px;
	}
	#follow-elem .w {
		left: 0;
		top: 50%;
		margin-top: -7px;
	}
	#follow-elem .wn {
		left: 0;
		top: 14px;
	}

	code {
		color: #888;
	}
	code strong {
		color: #000;
	}
	</style>

	<style>
	.ui-bubble {
	    *zoom:1;
	    _float: left;
	    position: relative;
	    background-color: #FFF;
	    border: 1px solid #999;
	    border-radius: 6px;
	    outline: 0;
	    background-clip: padding-box;
	    font-family: Helvetica, arial, sans-serif;
	    font-size: 14px;
	    line-height: 1.428571429;
	    color: #333;
	    opacity: 0;
	    -webkit-transform: scale(0);
	    transform: scale(0);
	    -webkit-transition: -webkit-transform .15s ease-in-out, opacity .15s ease-in-out;
	    transition: transform .15s ease-in-out, opacity .15s ease-in-out;
	}
	.ui-popup-show .ui-bubble {
	    opacity: 1;
	    -webkit-transform: scale(1);
	    transform: scale(1);
	}
	.ui-popup-focus .ui-bubble {
	    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	}

	.ui-bubble-content {
	    padding: 20px;
	}

	.ui-popup-top-left .ui-bubble,
	.ui-popup-top .ui-bubble,
	.ui-popup-top-right .ui-bubble {
	    top: -8px;
	}
	.ui-popup-bottom-left .ui-bubble,
	.ui-popup-bottom .ui-bubble,
	.ui-popup-bottom-right .ui-bubble {
	    top: 8px;
	}
	.ui-popup-left-top .ui-bubble,
	.ui-popup-left .ui-bubble,
	.ui-popup-left-bottom .ui-bubble {
	    left: -8px;
	}
	.ui-popup-right-top .ui-bubble,
	.ui-popup-right .ui-bubble,
	.ui-popup-right-bottom .ui-bubble {
	    left: 8px;
	}

	.ui-bubble-arrow-a,
	.ui-bubble-arrow-b {
	    position: absolute;
	    display: none;
	    width: 0;
	    height: 0;
	    overflow:hidden;
	    _color:#FF3FFF;
	    _filter:chroma(color=#FF3FFF);
	    border:8px dashed transparent;
	}
	.ui-popup-follow .ui-bubble-arrow-a,
	.ui-popup-follow .ui-bubble-arrow-b{
	    display: block;
	}
	.ui-popup-top-left .ui-bubble-arrow-a,
	.ui-popup-top .ui-bubble-arrow-a,
	.ui-popup-top-right .ui-bubble-arrow-a {
	    bottom: -16px;
	    border-top:8px solid #7C7C7C;
	}
	.ui-popup-top-left .ui-bubble-arrow-b,
	.ui-popup-top .ui-bubble-arrow-b,
	.ui-popup-top-right .ui-bubble-arrow-b {
	    bottom: -15px;
	    border-top:8px solid #fff;
	}
	.ui-popup-top-left .ui-bubble-arrow-a,
	.ui-popup-top-left .ui-bubble-arrow-b  {
	    left: 15px;
	}
	.ui-popup-top .ui-bubble-arrow-a,
	.ui-popup-top .ui-bubble-arrow-b  {
	    left: 50%;
	    margin-left: -8px;
	}
	.ui-popup-top-right .ui-bubble-arrow-a,
	.ui-popup-top-right .ui-bubble-arrow-b {
	    right: 15px;
	}
	.ui-popup-bottom-left .ui-bubble-arrow-a,
	.ui-popup-bottom .ui-bubble-arrow-a,
	.ui-popup-bottom-right .ui-bubble-arrow-a {
	    top: -16px;
	    border-bottom:8px solid #7C7C7C;
	}
	.ui-popup-bottom-left .ui-bubble-arrow-b,
	.ui-popup-bottom .ui-bubble-arrow-b,
	.ui-popup-bottom-right .ui-bubble-arrow-b {
	    top: -15px;
	    border-bottom:8px solid #fff;
	}
	.ui-popup-bottom-left .ui-bubble-arrow-a,
	.ui-popup-bottom-left .ui-bubble-arrow-b {
	    left: 15px;
	}
	.ui-popup-bottom .ui-bubble-arrow-a,
	.ui-popup-bottom .ui-bubble-arrow-b {
	    margin-left: -8px;
	    left: 50%;
	}
	.ui-popup-bottom-right .ui-bubble-arrow-a,
	.ui-popup-bottom-right .ui-bubble-arrow-b {
	    right: 15px;
	}
	.ui-popup-left-top .ui-bubble-arrow-a,
	.ui-popup-left .ui-bubble-arrow-a,
	.ui-popup-left-bottom .ui-bubble-arrow-a {
	    right: -16px;
	    border-left:8px solid #7C7C7C;
	}
	.ui-popup-left-top .ui-bubble-arrow-b,
	.ui-popup-left .ui-bubble-arrow-b,
	.ui-popup-left-bottom .ui-bubble-arrow-b {
	    right: -15px;
	    border-left:8px solid #fff;
	}
	.ui-popup-left-top .ui-bubble-arrow-a,
	.ui-popup-left-top .ui-bubble-arrow-b {
	    top: 15px;
	}
	.ui-popup-left .ui-bubble-arrow-a,
	.ui-popup-left .ui-bubble-arrow-b {
	    margin-top: -8px;
	    top: 50%;
	}
	.ui-popup-left-bottom .ui-bubble-arrow-a,
	.ui-popup-left-bottom .ui-bubble-arrow-b {
	    bottom: 15px;
	}
	.ui-popup-right-top .ui-bubble-arrow-a,
	.ui-popup-right .ui-bubble-arrow-a,
	.ui-popup-right-bottom .ui-bubble-arrow-a {
	    left: -16px;
	    border-right:8px solid #7C7C7C;
	}
	.ui-popup-right-top .ui-bubble-arrow-b,
	.ui-popup-right .ui-bubble-arrow-b,
	.ui-popup-right-bottom .ui-bubble-arrow-b {
	    left: -15px;
	    border-right:8px solid #fff;
	}
	.ui-popup-right-top .ui-bubble-arrow-a,
	.ui-popup-right-top .ui-bubble-arrow-b {
	    top: 15px;
	}
	.ui-popup-right .ui-bubble-arrow-a,
	.ui-popup-right .ui-bubble-arrow-b {
	    margin-top: -8px;
	    top: 50%;
	}
	.ui-popup-right-bottom .ui-bubble-arrow-a,
	.ui-popup-right-bottom .ui-bubble-arrow-b {
	    bottom: 15px;
	}
	</style>
</head>
<body>
<pre><code>var popup = new Popup();
popup.align = '<strong id="test-align-value">bottom left</strong>';
popup.innerHTML =
    	 '&#60;div class="ui-bubble"&#62;'
	+	'&#60;div class="ui-bubble-arrow-a"&#62;&#60;/div&#62;'
	+	'&#60;div class="ui-bubble-arrow-b"&#62;&#60;/div&#62;'
	+ 	'&#60;div class="ui-bubble-content"&#62;'
	+ 		'hello world'
	+ 	'&#60;/div&#62;'
	+ '&#60;/div&#62;'
popup.show(document.getElementById('follow-elem'));</code></pre>

<div id="follow-elem">
	<input type="radio" name="align" value="top left" class="nw" title="top left">
	<input type="radio" name="align" value="top" class="n" title="top">
	<input type="radio" name="align" value="top right" class="ne" title="top right">
	<input type="radio" name="align" value="right top" class="en" title="right top">
	<input type="radio" name="align" value="right" class="e" title="right">
	<input type="radio" name="align" value="right bottom" class="es" title="right bottom">
	<input type="radio" name="align" value="bottom right" class="se" title="bottom right">
	<input type="radio" name="align" value="bottom" class="s" title="bottom">
	<input type="radio" name="align" value="bottom left" class="sw" title="bottom left" checked>
	<input type="radio" name="align" value="left bottom" class="ws" title="left bottom">
	<input type="radio" name="align" value="left" class="w" title="left">
	<input type="radio" name="align" value="left top" class="wn" title="left top">
</div>


<script src="../lib/sea.js"></script>
<script>
seajs.config({
  alias: {
    "jquery": "jquery-1.10.2.js"
  }
});
</script>

<script>
seajs.use(['jquery', '../src/popup.js'], function ($, Popup) {
	var follow = $('#follow-elem')[0];
	var popup = new Popup();
	popup.innerHTML = '<div class="ui-bubble">'
	+	'<div class="ui-bubble-arrow-a"></div>'
	+	'<div class="ui-bubble-arrow-b"></div>'
	+ 	'<div class="ui-bubble-content">'
	+ 		'hello world'
	+ 	'</div>'
	+ '</div>';
	popup.show(follow);

	$('#follow-elem').on('click', '[type=radio]', function () {
		if (popup.open) {
			var align = $(this).val();
			popup.align = align;
			popup.show(follow);
			$('#test-align-value').html(align);
		}
	});
});
</script>
</body>
</html>